import Taro, {Component} from "@tarojs/taro";
import {View} from "@tarojs/components";


import './../../assets/styles/common.scss'
import './ProgressBar.scss'

interface IProps {
    width: number;
    height: number;
    borderRadius?: number;
    /**
     * 位置
     */
    childrenPosition?: 'left' | 'right' | 'center';
    backgroundColorLeft?: string;
    backgroundColorRight?: string;
}

class ProgressBar extends Component<IProps, {}> {

    render() {
        const {width, height, childrenPosition, borderRadius, backgroundColorLeft, backgroundColorRight} = this.props;
        return <View className={'progress_bar'}>
            <View
                className={`mb-5 ${childrenPosition ? childrenPosition == 'left' ? 'flex-c' : childrenPosition == 'right' ? 'flex-c-e' : 'flex-c-c' : 'flex-c'} `}>
                {this.props.children}
            </View>
            <View
                className={'progress_view'}
                style={{
                    height: Taro.pxTransform(height),
                    borderRadius: Taro.pxTransform(borderRadius || 0)
                }}
            >
                <View
                    style={{
                        width: width + '%', height: Taro.pxTransform(height),
                        borderRadius: Taro.pxTransform(borderRadius || 0),
                        background: `linear-gradient(to right, ${backgroundColorLeft || '#FFDB40'}, ${backgroundColorRight || '#ffb700'})`
                    }}
                    className='progress_line' />
            </View>
        </View>
    }
}

export default ProgressBar;
